import React, { useEffect, useState } from 'react'
import styles from './index.module.css'
import FilterTitle from '../FilterTitle'
import FilterPicker from '../FilterPicker'
import FilterMore from '../FilterMore'
import { Mask } from 'antd-mobile'
// 导入自定义的axios
import { API } from '../../../../utils/api'

export default function Filter(props) {
  const [titleSelectedStatus, setTitleSelectedStatus] = useState({
    area: false,
    mode: false,
    price: false,
    more: false
  })
  // 控制 FilterPicker 或 FilterMore 组件的展示与隐藏
  const [openType, setOpenType] = useState()
  // 所有筛选条件数据
  const [filterData, setFilterData] = useState()
  // 筛选条件数据
  const [selectedValues, setSelectedValue] = useState({
    area: ['area', 'null'],
    mode: ['null'],
    price: ['null'],
    more: []
  })
  const [visible, setVisible] = useState(false)

  useEffect(() => getFiltersList(), [])

  // 封装获取所有筛选条件的方法
  const getFiltersList = async () => {
    // 获取当前定位城市id
    const { value } = JSON.parse(localStorage.getItem('hkzf_city'))
    const { data: res } = await API.get(`/houses/condition?id=${value}`)
    setFilterData(res.body)
  }

  // 点击标题菜单实现高亮
  const onTitleClick = type => {
    // 创建新的标题选中状态对象
    const newTitleSelectStatus = { ...titleSelectedStatus }

    // 遍历标题选中对象
    // Object.keys() => ['area', 'mode', 'price', 'more']
    Object.keys(newTitleSelectStatus).forEach(key => {
      if (key === type) {
        // 当前标题
        newTitleSelectStatus[type] = true
        return
      }

      // 菜单高亮逻辑处理
      // 其他标题
      const selectVal = selectedValues[key]
      if (key === 'area' && (selectVal.length !== 2 || selectVal[0] !== 'area') && selectVal[2]) {
        // 高亮
        newTitleSelectStatus[key] = true
      } else if (key === 'mode' && selectVal[0] !== 'null') {
        // 高亮
        newTitleSelectStatus[key] = true
      } else if (key === 'price' && selectVal[0] !== 'null') {
        // 高亮
        newTitleSelectStatus[key] = true
      } else if (key === 'more' && selectVal.length !== 0) {
        // 更多选中 FilterMore 组件
        newTitleSelectStatus[key] = true
      } else {
        newTitleSelectStatus[key] = false
      }
    })

    if (type === 'more') setVisible(true)
    // 展开对话框
    setOpenType(type)
    // 使用新的标题选中状态对象来更新
    setTitleSelectedStatus(newTitleSelectStatus)
  }

  // 取消 (隐藏对话框)
  const onCancel = () => {
    // 创建新的标题选中状态对象
    const newTitleSelectStatus = { ...titleSelectedStatus }

    // 菜单高亮逻辑处理
    const selectVal = selectedValues[openType]
    if (
      openType === 'area' &&
      (selectVal.length !== 2 || selectVal[0] !== 'area') &&
      selectVal[2]
    ) {
      // 高亮
      newTitleSelectStatus[openType] = true
    } else if (openType === 'mode' && selectVal[0] !== 'null') {
      // 高亮
      newTitleSelectStatus[openType] = true
    } else if (openType === 'price' && selectVal[0] !== 'null') {
      // 高亮
      newTitleSelectStatus[openType] = true
    } else if (openType === 'more' && selectVal.length !== 0) {
      // 更多选中 FilterMore 组件
      newTitleSelectStatus[openType] = true
    } else {
      newTitleSelectStatus[openType] = false
    }

    // 隐藏对话框
    setOpenType('')
    // 更新菜单高亮状态数据
    setTitleSelectedStatus(newTitleSelectStatus)
  }

  // 确定 (隐藏对话框)
  const onSave = value => {
    // 创建新的标题选中状态对象
    const newTitleSelectStatus = { ...titleSelectedStatus }

    // 菜单高亮逻辑处理
    const selectVal = value
    if (
      openType === 'area' &&
      (selectVal.length !== 2 || selectVal[0] !== 'area') &&
      selectVal[2]
    ) {
      // 高亮
      newTitleSelectStatus[openType] = true
    } else if (openType === 'mode' && selectVal[0] !== 'null') {
      // 高亮
      newTitleSelectStatus[openType] = true
    } else if (openType === 'price' && selectVal[0] !== 'null') {
      // 高亮
      newTitleSelectStatus[openType] = true
    } else if (openType === 'more' && selectVal.length !== 0) {
      // 更多选中 FilterMore 组件
      newTitleSelectStatus[openType] = true
    } else {
      newTitleSelectStatus[openType] = false
    }

    const newSelectedValues = { ...selectedValues, [openType]: value }
    const { area, mode, price, more } = newSelectedValues

    // 筛选条件数据
    const filters = {}

    // 区域
    const areaKey = area[0]
    let areaValue = 'null'
    if (area.length === 4) {
      areaValue = area[2] !== 'null' ? area[2] : area[1]
    }
    filters[areaKey] = areaValue

    // 方式和租金
    filters.mode = mode[0]
    filters.price = price[0]

    // 更多筛选条件 more
    filters.more = more.join(',')

    // 调用父组件中的方法，来将筛选数据传递给父组件
    props.onFilter(filters)

    // 隐藏对话框
    setOpenType('')
    // 更新菜单高亮状态数据
    setTitleSelectedStatus(newTitleSelectStatus)
    // 更新当前 type 对应的值
    setSelectedValue(newSelectedValues)
  }

  // 渲染 FilterPicker 组件的方法
  function renderFilterPicker() {
    if (!['area', 'mode', 'price'].includes(openType)) return null

    const { area, subway, rentType, price } = filterData

    // 根据 openType 来拿到当前筛选条件数据
    let data = []
    let defaultValue = selectedValues[openType]
    switch (openType) {
      case 'area':
        // 获取到区域数据
        data = [area, subway]
        break
      case 'mode':
        data = rentType
        break
      case 'price':
        data = price
        break
      default:
        break
    }

    return (
      <FilterPicker
        key={openType}
        onCancel={onCancel}
        onSave={onSave}
        data={data}
        type={openType}
        defaultValue={defaultValue}
      />
    )
  }

  // 渲染 FilterMore 组件
  function renderFilterMore() {
    if (!filterData) return
    const { roomType, oriented, floor, characteristic } = filterData

    const data = { roomType, oriented, floor, characteristic }

    const defaultValue = selectedValues.more
    return (
      <FilterMore
        visible={visible}
        data={data}
        onSave={onSave}
        handleVisible={() => setVisible(false)}
        defaultValue={defaultValue}
      />
    )
  }

  return (
    <div className={styles.root}>
      {/* 遮罩层组件 */}
      <Mask visible={['area', 'mode', 'price'].includes(openType)} onMaskClick={onCancel} />

      {/* 内容组件 */}
      <div className={styles.content}>
        {/* 标题栏 */}
        <FilterTitle titleSelectedStatus={titleSelectedStatus} onClick={onTitleClick} />

        {/* 前三个菜单对应内容 */}
        {renderFilterPicker()}

        {/* 最后一个菜单对应内容 */}
        {renderFilterMore()}
      </div>
    </div>
  )
}
